<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			#box1 {
				width: 1200px;
				height: 380px;
				margin: 50px auto;
				overflow: hidden;
				position: relative;
			}

			#box1 ul {
				position: absolute;
				left: 0;
				top: 0;
			}

			#box1 ul li {
				height: 500px;
				float: left;
			}

			#box1 ol {
				width: 80px;
				height: 20px;
				position: absolute;
				bottom: 0px;
				left: 50%;
				margin-left: -100px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			#box1 ol li {
				width:10px;
				height: 10px;
				border-radius: 50%;
				background-color: dimgray;
			}

			#box1 ol li.ac {
				background-color: royalblue;
				width: 17px;
				border-radius: 25px;
			}

			#box1>a {
				text-decoration: none;
				position: absolute;
				top: 50%;
				margin-top: -35px;
				width: 40px;
				font-size: 40px;
				vertical-align: middle;
				color: #fff;
				background: rgba(0, 0, 0, 0.5);
				z-index: 6;
				text-align: center;
				height: 70px;
				line-height: 70px;
			}

			#box1 .goPrev {
				left: 0;
			}

			#box1 .goNext {
				right: 0;
			}

			img {
				width: 1200px;
				height: 360px;
			}
		</style>
	</head>
	<script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>

	<body>
		<div id="box1">
			<ul>
				<li><img src="img/090017.76896957_o.jpg" /></li>
				<li><img src="img/101344.93259552_o.jpg"></li>
				<li><img src="img/102219.69212121_o.jpg"></li>
				<li><img src="img/113158.25585719_o.jpg"></li>
				<li><img src="img/d7ea3c840a0b6329dc427b65814467b1aeef1a3e2c33c7-DX86Bd.jpg"></li>
			</ul>
			<ol>
			</ol>
			<a href="javascript:;" class="goPrev">&laquo;</a>
			<a href="javascript:;" class="goNext">&raquo;</a>
		</div>
		<script type="text/javascript">
			class Carousel {
				constructor(selector) {
					this.$box = $(selector)
					this.$ul = this.$box.children('ul')
					// console.log(this.$ul)
					this.$ol = this.$box.children('ol')
					this.$imgs = this.$ul.children()
					this.$goNext = this.$box.children('.goNext')
					this.$goPrev = this.$box.children('.goPrev')

					this.len = this.$imgs.length
					this.width = this.$imgs.outerWidth()

					this.index = 0
					this.lastIndex = 0

					this.init()
					this.btnsClick()
					this.nextChange()
					this.prevChange()
					this.auto()
				}
				init() {
					for (var i = 0; i < this.len; i++) {
						$('<li>').addClass(i === 0 ? 'ac' : '').appendTo(this.$ol)
					}
					// 找一下所有按钮
					this.$btns = this.$ol.children()

					// 在ul后面追加第0张图
					this.$imgs.eq(0).clone().appendTo(this.$ul)

					// 计算ul宽度
					this.$ul.width(this.width * (this.len + 1))
				}
				btnsClick() {
					// 因为在点击事件里内层this指向按钮，外层this指向Carousel对象
					// 两个都需要，那就再这里存一下
					const _this = this
					this.$btns.on('click', function() {
						// this是当前按钮
						// _this值外层对象
						_this.lastIndex = _this.index
						_this.index = $(this).index()
						$(this).addClass('ac').siblings().removeClass('ac')
						_this.$ul.animate({
							left: -_this.index * _this.width
						})
					})
				}
				nextChange() {
					this.$goNext.on('click', () => {
						this.lastIndex = this.index
						this.index++
						if (this.index === this.len) {
							// 先移动到追加那张图，再瞬间跳回第0张
							this.index = 0
							this.$ul.animate({
								left: -this.len * this.width
							}, () => {
								this.$ul.css('left', 0)
							})
						} else {
							this.$ul.animate({
								left: -this.index * this.width
							})
						}
						// 无论是否超出，都要按照index来修改按钮
						this.$btns.eq(this.index).addClass('ac').siblings().removeClass('ac')
					})
				}
				prevChange() {
					this.$goPrev.on('click', () => {
						this.lastIndex = this.index
						this.index--
						if (this.index < 0) {
							this.index = this.len - 1
							// 先跳到追加那张，再往len-1的位置移动
							this.$ul.css('left', -this.len * this.width)
						}
						// 因为后面这两句无论if还是else都要执行，所以直接放外面
						this.$ul.animate({
							left: -this.index * this.width
						})
						this.$btns.eq(this.index).addClass('ac').siblings().removeClass('ac')
					})
				}
				auto() {
					this.play()
					this.$box.hover(() => {
						clearInterval(this.timer)
					}, () => {
						this.play()
					})
				}
				play() {
					this.timer = setInterval(() => {
						// trigger触发事件
						this.$goNext.trigger('click')
					}, 2000)
				}
			}

			new Carousel('#box1')
		</script>
	</body>
</html>
